<template>
  <div>
    <div>
      <el-form :inline="true" :model="selectData" class="demo-form-inline">
        <el-form-item label="角色">
          <el-select v-model="selectData.role" class="m-2" placeholder="Select">
            <el-option label="全部" :value = "0"></el-option>
            <el-option
              v-for="item in roleList"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="名字">
          <el-input v-model="selectData.nickName" placeholder="请输入关键字" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="list" style="width: 100%">
        <el-table-column
          v-for="(item, index) in columns"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        >
          <template #default="{ row }">
            <template v-if="item.prop === 'role'">
              <span class="role_span" v-for="(item, index) in row.role" :key="index">{{
                item.roleName
              }}</span>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts">
import { InitData } from "../type/user";
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { getUserList, getRoleList } from "../request/api";
export default defineComponent({
  setup() {
    onMounted(() => {
      getUser();
      getRole();
    });

    const data = reactive(new InitData());
    const columns = [
      { label: "id", prop: "id", width: "50px" },
      { label: "名字", prop: "nickName", width: "100px" },
      { label: "角色", prop: "role" },
    ];
    const getUser = () => {
      getUserList().then((res) => {
        data.list = res.data;
      });
    };
    const getRole = () => {
      getRoleList().then((res) => {
        data.roleList = res.data;
      });
    };
    return { ...toRefs(data), columns };
  },
});
</script>

<style scoped>
.role_span {
  margin-right: 8px;
}
</style>